<template>
	<div>
		<div class="top">
			<Row :gutter="10" justify="center">
				<Col span="4">
					<Input v-model="value15" placeholder="输入姓名/手机号码/SN号" />
				</Col>
				<!-- <Col span="4">
					<Select placeholder="请选择测量时段" v-model="model1">
						<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</Col> -->
				<Col span="4">
                    <Select placeholder="请选上传方式" v-model="model1">
						<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</Col>
				<Col span="4">
					<DatePicker style="width: 100%" type="daterange" placement="top-start" placeholder="请选择测量时间范围"></DatePicker>
				</Col>
				<Col span="4">
					<Button type="primary">搜索</Button>
					<Button type="default" plain>清空</Button>
				</Col>
				<Col span="4" type="flex" align="right">
				</Col>
			</Row>
		</div>
		<Table :columns="tableHeaders" :data="items">
			<template slot-scope="{ row }" slot="action">
				<Button type="text" size="small">修改资料</Button>
			</template>
            <template slot-scope="{ row }" slot="sex">
                <span v-if="Number(row.sex)===1">男</span>
                <span v-else-if="Number(row.sex)===2">女</span>
                <span v-else>-</span>
            </template>
		</Table>
		<div class="page">
			<Page :total="100" />
		</div>
	</div>
</template>




<script>
import { testPageQuerySugarList, testPageQueryPressureList, testPageQueryFatList, testPageQueryUricList, testPageQueryCopdList } from '@api/test.js'

export default {
	data() {
		return {
			value15: '',
			model1: '',
			cityList: [
				{
					value: 'New York',
					label: 'New York'
				},
				{
					value: 'London',
					label: 'London'
				},
				{
					value: 'Sydney',
					label: 'Sydney'
				},
				{
					value: 'Ottawa',
					label: 'Ottawa'
				},
				{
					value: 'Paris',
					label: 'Paris'
				},
				{
					value: 'Canberra',
					label: 'Canberra'
				}
			],

			tableHeaders: [
                // 编号
                // 姓名
                // 性别
                // 年龄
                // 手机号
                // 上传方式
                // SN号
                // 测量时间
                // 总胆固醇(mmol/L)
                // 甘油三脂(mmol/L)
                // 高密度脂蛋白胆固醇(mmol/L)
                // 低密度脂蛋白胆固醇(mmol/L)
                
				{
					title: '编号',
                    align:'center',
					key: 'num',
				},
				{
                    align:'center',
					width: 140,
					title: '姓名',
					key: 'name',
				},
				{
                    align:'center',
					title: '性别',
					slot: 'sex',
				},
				{
                    align:'center',
					title: '年龄',
					key: 'age',
                },
                {
					title: '手机号',
					width: 140,
                    align:'center',
					key: 'phone',
                },
                {
                    align:'center',
					title: '上传方式',
					key: 'method',
                },
                {
					title: 'SN号',
                    align:'center',
					key: 'sn',
                },
                {
                    align:'center',
					title: '测试时间',
					key: 'time',
					width: 140
                },
                {
                    align:'center',
					title: '尿酸（umol/L）',
					key: 'z1',
                },
			],
			data6: [
				
            ],
            
            items: [],
			loading: false,
			page: 1,
			pageSize: 10,
			totalNum: 0,
		}
	},
	mounted() {
		this.initTable()
	},
	methods: {
        modal(res, title) {
			if (res.code === '0') {
				this.$Modal.success({
					title: title || this.alertTitle,
					content: res.data
				})
			} else {
				this.$Modal.warning({
					title: title || this.alertTitle,
					content: res.errMsg
				})
			}
		},
		pageChange(page) {
			this.page = page
			this.testPageQuerySugarList()
			console.log('page>', page)
		},
		testPageQuerySugarList() {
			const { page, pageSize, loading } = this
			if (loading) return
			this.loading = true
			testPageQuerySugarList({
				page,
				pageSize
			})
				.then(res => {
					this.loading = false
					console.log('testPageQuerySugarList->', res)
					if (res.code === '0') {
						const { currentPage, isMore, items, pageSize, totalNum, totalPage } = res.data
						;(this.items = items), (this.page = currentPage), (this.totalNum = totalNum)
						console.log('this.items->', this.items)
					} else {
						this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
						})
					}
				})
				.catch(err => {
					this.loading = false
				})
		},
		show(index) {
			this.$Modal.info({
				title: 'User Info',
				content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
			})
		},
		remove(index) {
			this.data6.splice(index, 1)
		},
		initTable() {
			const arr = []
			for (let index = 0; index < 10; index++) {
				arr.push({
					num: '19081001',
					name: '张三',
					sex: '男',
					age: '32',
                    sex: '男',
                    phone: '13800003333',
					time: '2019-07-17 11:30',
					method: '自动',
                    sn: '4536564576',
                    z1: '360',

                    // 编号
                // 姓名
                // 性别
                // 年龄
                // 手机号
                // 上传方式
                // SN号
                // 测量时间
                // 血压（mmHg）
                // 心率（bpm）
				})
				this.data6 = arr
			}
		}
	}
}
</script>
<style>
/* .ivu-table-wrapper{
    max-width: 100%;
    overflow-y: scroll !important;
} */
.top {
	margin-bottom: 20px;
}
.page {
	margin-top: 20px;
}
.check {
}
</style>
